    <!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">

    <header>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>宠爱</title>

        <!-- Favicons -->
        <link rel="shortcut icon" th:href="@{/assets/images/favicon.ico}">
        <link rel="stylesheet" th:href="@{/assets/css/vendor/vendor.min.css}">
        <link rel="stylesheet" th:href="@{/assets/css/plugins/plugins.min.css}">
        <link rel="stylesheet" th:href="@{/assets/css/style.min.css}">
        <script th:src="@{/assets/js/vendor.min.js}"></script>
        <script th:src="@{/assets/js/plugins.min.js}"></script>
        <!--Main JS-->
        <script th:src="@{/assets/js/main.js}"></script>
        <script type="text/javascript" th:src="@{/assets/js/jquery-3.2.1.slim.min.js}"></script>
        <script type="text/javascript" th:src="@{/assets/js/bootstrap.min.js}"></script>
        <script type="text/javascript" th:src="@{/assets/js/axios.min.js}"></script>
    </header>

    <body>

    <!-- 头部导航栏，引入公共片页面 -->
    <div class="header section" th:replace="~{common/head::head}"></div>

    <!--轮播图-->
       <div class="section">
        <div class="hero-slider swiper-container">
            <div class="swiper-wrapper">
                <div class="hero-slide-item swiper-slide">
                    <div class="hero-slide-bg">
                        <img th:src="@{/assets/images/slider/slider1-1.png}" alt="Slider Image"/>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <!-- 商品展示 -->
    <div class="section position-relative">
        <div class="container">

            <!-- Section Title & Tab Start -->
            <div class="row" data-aos="fade-up" data-aos-duration="1000">
                <!-- Tab Start -->
                <div class="col-12">
                    <div class="section-title text-center" style="margin: 40px auto">
                        <h2 class="title">商品展示</h2>
                    </div>
                </div>
                <!-- Tab End -->
            </div>
            <!-- Section Title & Tab End -->

            <!-- Products Tab Start -->
            <div class="row" data-aos="fade-up" data-aos-duration="1100">
                <div class="col-12">
                    <div class="tab-content">

                        <div class="tab-pane fade show active" id="tab-product-all">
                            <div class="row m-b-n40">

                                <!-- 循环4个商品 -->
                                <div class="col-12 col-sm-6 col-lg-3 product-wrapper m-b-40" th:each="g:${goodsList}">
                                    <div class="product">
                                        <!-- 商品图片  -->
                                        <div class="thumb" style="width: 300px; height: 330px">
                                            <a th:href="@{'/goods/singleGoods?goodId='+${g.goodsId}+'&goodsTypeName='+${g.goodsTypeName}}" class="image" >
                                                <img th:src="'http://localhost:8080/uploadFile/product/'+${g.cover}"
                                                     alt="Product"/>
                                            </a>
                                        </div>
                                        <!-- 商品信息  -->
                                        <div class="content">
                                            <h5 class="title"><a th:href="@{'/goods/singleGoods?goodId='+${g.goodsId}+'&goodsTypeName='+${g.goodsTypeName}}" th:text="${g.goodsName}">An
                                                Animal Album</a></h5>
                                            <span class="price">
                                                <span class="new" th:text="|¥${g.salePrice}|">111</span>
                                                <span class="old" th:text="|¥${g.originalPrice}|">222</span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Product End -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Products Tab End -->
        </div>
    </div>

    <!-- 博客展示 -->
    <div class="section section-margin-bottom">
        <div class="container">

            <div class="row" data-aos="fade-up" data-aos-duration="1000">
                <div class="col-12">
                    <div class="section-title text-center" style="margin: 40px auto">
                        <h2 class="title">宠物知识</h2>
                    </div>
                </div>
            </div>

            <div class="row row-cols-lg-3 row-cols-sm-2 row-cols-1 m-b-n40">
                <!-- 循环展示三篇博客-->
                <div class="col m-b-40" data-aos="fade-up" data-aos-duration="1000" th:each="a:${articleList}">
                    <!-- Single Blog Start -->
                    <div class="single-blog-wrapper">

                        <!-- 博客详情 -->
                        <div class="blog-thumb thumb-effect">
                            <a href="#" th:if="${session.user != null}">
                                <a class="image" th:href="@{/article/artcleDetails(articleId=${a.articleId},userId=${session.user.userId})}">
                                    <img class="fit-image" th:src="'http://localhost:8080/uploadFile/article/'+${a.articleImgpath}" alt="Blog Image">
                                </a>
                            </a>
                            <a href="#" th:if="${session.user == null}">
                                <a class="image" th:href="@{/article/artcleDetails(articleId=${a.articleId},userId=0)}">
                                    <img class="fit-image" th:src="'http://localhost:8080/uploadFile/article/'+${a.articleImgpath}" alt="Blog Image">
                                </a>
                            </a>
                        </div>
                        <!-- Blog Thumb End -->

                        <!-- Blog Content Start -->
                        <div class="blog-content" th:if="${session.user == null}">
                            <div class="blog-meta">
                                <ul>
                                    <li><span>By</span><a href="#/" th:text="${a.userName}"></a></li>
                                    <li><span th:text="${#dates.format(a.createTime,'yyyy-MM-dd')}"></span></li>
                                </ul>
                            </div>
                            <h2 class="blog-title"><a th:href="@{/article/artcleDetails(articleId=${a.articleId},userId=0)}" th:text="${a.articleTitle}"></a></h2>
                            <p th:text="${a.articleContent}"
                               style="height: 30%;overflow: hidden;-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical"></p>
                            <a class="more-link" th:href="@{/article/artcleDetails(articleId=${a.articleId},userId=0)}">Read More</a>
                        </div>
                        <div class="blog-content" th:if="${session.user != null}">
                            <div class="blog-meta">
                                <ul>
                                    <li><span>By</span><a href="#/" th:text="${a.userName}"></a></li>
                                    <li><span th:text="${#dates.format(a.createTime,'yyyy-MM-dd')}"></span></li>
                                </ul>
                            </div>
                            <h2 class="blog-title"><a th:href="@{/article/artcleDetails(articleId=${a.articleId},userId=${session.user.userId})}" th:text="${a.articleTitle}"></a></h2>
                            <p th:text="${a.articleContent}"
                               style="height: 30%;overflow: hidden;-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical"></p>
                            <a class="more-link" th:href="@{/article/artcleDetails(articleId=${a.articleId},userId=${session.user.userId})}">Read More</a>
                        </div>
                        <!-- Blog Content End -->

                    </div>
                    <!-- Single Blog End -->
                </div>

            </div>

        </div>
    </div>

    <!-- 底部信息栏 -->
    <footer class="section footer-section" th:replace="~{common/foot::foot}"></footer>
    <!-- Footer Section End -->

    </body>

    </html>